<template>
    <div>
        <div v-if="isShowChart">
            <div style="text-align:right;">
                <Select 
                v-model="wechat"  
                style="width: 350px;text-align:left;" 
                placeholder="请选择微信"
                @on-change="changeWx">
                    <Option value="0">
                        全部
                    </Option>
                    <Option v-for="item in userInfos.wechat_info" :key="item.id" :value="item.wechatid">
                        {{item.wechatno?item.wechatno:item.wechatid}}({{item.wechatnick}})
                    </Option>
                </Select>
            </div>
       
        <Row :gutter="16" class="ivu-mt-16">
        <Col :span="8">
            <Card dis-hover>
                <div style="height:240px;display:flex;align-items:center;" class="userInfo">
                    <Row :gutter="16"> 
                        <Col :span="10">
                            <img :src="userInfos.head_portrait?userInfos.head_portrait:defaultAvatar" width="100%" alt="">
                        </Col>
                        <Col :span="14">
                            <p><span>姓&emsp;&emsp;名:</span><span>{{useInfo.realname}}</span></p>
                            <p><span>所属项目:</span><span>{{userInfos.project_str}}</span></p>
                            <p><span>{{dateText}}排名:</span><span>{{useInfo.sort}}</span></p>
                            <p><span>{{dateText}}到诊:</span><span>{{useInfo.visit_count}}</span></p>
                        </Col>                    
                    </Row>
                </div>                
            </Card>
        </Col>
        <Col :span="16">
        <Card dis-hover>
           <Row> 
        <Col :span="12">
            <ve-bar 
                width="300px" 
                height="240px" 
                :tooltip="tooltip"
                :loading="loading"                 
                :data="chartData" 
                :title="chartTitle"
                :grid="grid" 
                :extend="extend" 
                :legend="legend">
            </ve-bar>    
        </Col>
        <Col :span="12">
            <ve-bar 
            width="300px"
            height="240px"
            :tooltip="tooltip" 
            :loading="loading"                
            :data="chartData12" 
            :title="chartTitle12"
            :grid="grid" 
            :extend="extend" 
            :legend="legend">
            </ve-bar>  
        </Col>
        </Row> 
        </Card> 
        </Col>
    </Row>
    <Row :gutter="16" class="ivu-mt-16">
        <Col :span="8">
        <h3 v-font="20" class="ivu-mb-8">聊天时间段发送消息量占比分析</h3>
            <Card dis-hover>
                <ve-line 
                width="280px" 
                height="240px"    
                :tooltip="tooltip1"            
                :loading="loading"                  
                :data="chartData1"
                :title="chartTitle1" 
                :grid="grid" 
                :extend="extend7" 
                :dataZoom="dataZoom"
                :legend="legend">
                </ve-line>   
            </Card>
        </Col>
        <Col :span="16">
        <h3 v-font="20" class="ivu-mb-8">微信通信录分析</h3>
        <Card dis-hover>
        <Row :gutter="16">
            <Col :span="12">            
                <ve-histogram 
                width="300px" 
                height="240px"
                :loading="loading"                  
                :data="chartData2" 
                :tooltip="tooltip2"      
                :title="chartTitle2" 
                :grid="grid" 
                :extend="extend1" 
                :legend="legend">
                </ve-histogram>
            </Col>
            <Col :span="12">
                <ve-bar 
                width="300px"
                height="240px" 
                :tooltip="tooltip2" 
                :loading="loading"                
                :data="chartData3" 
                :title="chartTitle3"
                :grid="grid" 
                :extend="extend8" 
                :legend="legend">
                </ve-bar>   
            
            </Col>
        </Row>
        </Card>
        </Col>        
    </Row>   
        <h3 v-font="20" class="ivu-mb-8 ivu-mt-16">{{dateText}}通话拨打记录分析</h3>                            
        <Card dis-hover>
        <Row :gutter="16">                    
            <Col :span="8">   
                <ve-pie 
                width="280px" 
                height="240px"
                :loading="loading"                  
                :data="chartData4" 
                :extend="extend3" 
                :legend="legend4">
                </ve-pie>   
            </Col>
            <Col :span="8">
                <ve-histogram 
                width="300px" 
                height="240px" 
                :tooltip="tooltip2" 
                :loading="loading"                 
                :data="chartData5" 
                :grid="grid" 
                :extend="extend6" 
                :legend="legend">
                </ve-histogram> 
            </Col>
            <Col :span="8">
                <ve-histogram 
                width="300px" 
                height="240px" 
                :tooltip="tooltip2" 
                :loading="loading"                 
                :data="chartData6" 
                :grid="grid" 
                :extend="extend6" 
                :legend="legend">
                </ve-histogram> 
            </Col>
        </Row>
        </Card>
        
        <h3 v-font="20" class="ivu-mb-8 ivu-mt-16">朋友圈更新分析</h3>
        <Card dis-hover>
        <Row :gutter="16">
            <Col :span="12">
                <Row>
                    <Col :span="12"> 
                        <ve-pie 
                        width="220px" 
                        height="245px" 
                        :loading="loading"                         
                        :data="chartData7"
                        :extend="extend4" 
                        :title="chartTitle7" 
                        :legend="legend">
                        </ve-pie>  
                    </Col>
                    <Col :span="12"> 
                        <ve-pie 
                        width="220px" 
                        height="240px"
                        :loading="loading"                        
                        :data="chartData8" 
                        :title="chartTitle8"
                        :extend="extend4" 
                        :legend="legend">
                        </ve-pie>  
                    </Col>
                </Row>
            </Col>
            <Col :span="12">
                <ve-line 
                width="480px" 
                height="240px"
                :tooltip="tooltip3"
                :loading="loading"                  
                :data="chartData9"
                :title ="chartTitle9"
                :grid="grid" 
                :dataZoom="dataZoom"
                :extend="extend7" 
                :legend="legend">
                </ve-line>              
            </Col>
        </Row>
        </Card>
        <!-- <h3 v-font="20" class="ivu-mb-8 ivu-mt-16">{{dateText}}回访记录分析</h3>
        <div style="text-align:right;" class="ivu-mb-8">
            <Select 
            v-if="false"
            v-model="proId"  
            style="width: 350px;text-align:left;" 
            placeholder="请选择项目"
            @on-change="changePro">
                <Option v-for="(item,index) in proIds" :key="index" :value="item.value">
                    {{item.name}}
                </Option>
            </Select>
        </div>
        <Card dis-hover>
        <Row :gutter="16">                    
            <Col :span="8">   
                <ve-pie 
                width="280px" 
                height="240px"
                :loading="loading"                  
                :data="chartData10" 
                :title="chartTitle10"
                :extend="extend3" 
                :legend="legend4">
                </ve-pie>  
            </Col>
            <Col :span="8">
                <ve-histogram 
                width="280px" 
                height="240px"
                :loading="loading"                  
                :data="chartData11" 
                :grid="grid" 
                :extend="extend6" 
                :legend="legend">
                </ve-histogram>   
            </Col>
            <Col :span="8">
               <ve-bar 
                width="280px"
                height="240px"
                 :tooltip="tooltip" 
                :loading="loading"                
                :data="chartData12" 
                :title="chartTitle12"
                :grid="grid" 
                :extend="extend" 
                :legend="legend">
                </ve-bar>     
            </Col>
        </Row>
        </Card> -->
        </div>
        <div v-else>
           <h2>当前人员名下未找到任何微信号</h2> 
        </div>
    </div>
    
</template>

<script>
    import echarts from 'echarts';
    import {
        memberInfo,
        chatStatistics,
        contactInfo,
        contactDis,
        voiceRecord,
        wechatCircle,
        callbackInfo
    } from "@api/jzy";
    export default {
        name:"personnelFile",
        props:['dateType','useInfo','currentPro','showDetail'],
        watch:{
            showDetail(){ 
                if(this.showDetail){
                    switch(this.dateType){
                        case '1':
                            this.dateText='本月'
                            break;
                        case '2':
                            this.dateText='本周'
                            break;
                        case '3':
                            this.dateText='上月'
                            break;
                        default:
                            this.dateText='本月'
                            break;
                    }
                    this.chartTitle.text=`${this.dateText}聊天信息统计分析`
                    this.chartTitle3.text=`${this.dateText}微信好友状态分布图`   
                    this.chartTitle12.text=`${this.dateText}回访状态分布图`                 
                    this.getUserInfo()
                }               
                
            }
            
        },
        data () {
            return{
                defaultAvatar:require("@/assets/images/avaters.png"),
                wechat:'0',
                isShowChart:false,
                dateText:'',
                proIds:[],
                proId:'',
                userInfos:{},
                loading:false,                
                chartData:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData1:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData2:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData3:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData4:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData5:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData6:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData7:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData8:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData9:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData10:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData11:{
                    columns: ['name','value'],
                    rows: []
                },
                chartData12:{
                    columns: ['name','value'],
                    rows: []
                },
                tooltip:{
                    formatter:(e)=>{
                        if(e.name=='已到院'||e.name=='已拉黑'||e.name=='未接通'||e.name=='正常回访'||e.name=='有意向'){
                            return `${e.value }人`
                        }else{
                            return `${e.value }条`
                        }
                    }
                },
                tooltip1:{
                    formatter:(e)=>{
                        return `${e.name}时 : ${e.value}(条)`
                    }
                },
                tooltip2:{
                    formatter:(e)=>{
                        return `${e.name} : ${e.value}(人)`
                    }
                },
                tooltip3:{
                    formatter:(e)=>{
                        return `${e.name}号 : ${e.value}(条)`
                    }
                },
                chartTitle:{
                    text:``,
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },
                chartTitle1:{
                    text:'聊天时间发送消息量占比分析',
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },                
                chartTitle2:{
                    text:'当前微信通讯录状态',
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },                
                chartTitle3:{
                    text:``,
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },                   
                chartTitle7:{
                    text:'近7日更新占比',
                    x:'center',
                    y:'bottom',
                    textStyle:{
                        fontSize:12,
                        color:"#666"
                    }
                },
                chartTitle8:{
                    text:'近30日更新占比',
                    x:'center',
                    y:'bottom',
                    textStyle:{
                        fontSize:12,
                        color:"#666"
                    }
                },
                chartTitle9:{
                    text:'最近一月每日朋友圈更新量',
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },
                chartTitle10:{
                    text:'回访方式统计',
                    x:'center',
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },   
                chartTitle12:{
                    text:``,
                    textStyle:{
                        fontSize:14,
                        color:"#666"
                    }
                },            
                grid: {
                    top: '20%',
                    right:'10%',
                    bottom:0,
                    containLabel: true
                },
                legend:{
                    show:false
                },
                legend4:{
                   y:'bottom',
                   icon: 'circle',
                   itemHeight: 10,
                   itemWidth: 10
                },
                extend: {                    
                    series: {
                        smooth: false,
                        barWidth:20,
                        barGap:'0%',
                        label: { 
                            show: true, 
                            position: "right" ,
                            formatter:function(e){
                                if(e.name=='已到院'||e.name=='已拉黑'||e.name=='未接通'||e.name=='正常回访'||e.name=='有意向'){
                                    return `${e.value }人`
                                }else{
                                    return `${e.value }条`
                                }
                            }
                        },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                extend1: {
                    xAxis:{
                        axisLabel:{
                            formatter:function(e){
                                return e.replace(/(\W{3})(?=.)/g, "$1 \n") 
                            }
                        }
                    },
                    series: {
                        smooth: false,
                        barWidth:20,
                        barGap:'0%',
                        label: { 
                            show: true, 
                            position: "top",
                            formatter:function(e){
                                return `${e.value }人`
                            }
                        },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                extend3: {
                    series: {
                        radius:'75%',
                        center:["50%","50%"],
                        label: {
                            formatter: '{b}:\n{c}',
                            position: 'inside'
                        }
                    }
                },
                extend4: {
                    series: {
                        radius:'85%',
                        center:["50%","50%"],
                        label: {
                            formatter: '{b}:\n{d}%',
                            position: 'inside',
                            fontSize:10
                        }
                    }
                },                
                extend5: {
                    series: {
                        smooth: false,
                        barWidth:20,
                        barGap:'0%',
                        label: { show: true, position: "top" },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                extend6: {
                    series: {
                        smooth: false,
                        barWidth:60,
                        barGap:'0%',
                        label: { 
                            show: true, 
                            position: "top",
                            formatter:function(e){
                                if(e.name=='通话人数'||e.name=='回访人数'){
                                    return `${e.value }人`
                                }else if(e.name=='通话人次'||e.name=='回访次数'){
                                    return `${e.value }次`
                                }else if(e.name=='通话时长'){
                                    return `${e.value }分钟`
                                }else{
                                    return `${e.value }个`
                                }                                
                            }
                         },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                extend7: {                    
                    series: {
                        smooth: false,
                        barWidth:20,
                        barGap:'0%',
                        label: { 
                            show: true, 
                            position: "right" 
                        },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                extend8: {                    
                    series: {
                        smooth: false,
                        barWidth:20,
                        barGap:'0%',
                        label: { 
                            show: true, 
                            position: "right" ,
                            formatter:function(e){
                                return `${e.value }人`
                            }
                        },
                        itemStyle: {
                            // 添加渐变颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                },
                dataZoom: [
                    {
                        orient: "horizontal",
                        show: true,//控制滚动条显示隐藏
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 15, //滚动条高度
                        start: 0, //滚动条开始位置（共100等份）
                        end: this.endValue,//滚动条结束位置
                        bottom: "4%",
                        zoomLock: true, //控制面板是否进行缩放
                    },
                    {
                        type: 'inside',
                        brushSelect: true,
                        start: 0,
                        end: 100,
                        xAxisIndex: [0]
                    }
                ]

            }            
        },
        methods:{
            changeWx(){
                this.getContactInfo()
                this.getChatStatistics()
                this.getContactDis()
                this.getVoiceRecord()
                this.getWechatCircle()
            },
            changePro(){
                this.getCallbackInfo()
            },
            getUserInfo() {
                memberInfo({
                    id: this.useInfo.id,
                    project_id: this.currentPro
                }).then((res) => {
                    this.wechat='0';
                    this.userInfos=res     
                    this.isShowChart=this.userInfos.wechat_info[0]? true:false                 
                    this.proIds=res.project_list
                    this.proId=this.proIds[0]['value']
                    if(this.isShowChart){
                        this.getChatStatistics()
                        this.getContactInfo()
                        this.getContactDis()
                        this.getVoiceRecord()
                        this.getWechatCircle()
                        this.getCallbackInfo()
                    }
                });
            },
            getChatStatistics(){
                 chatStatistics({
                    id:this.userInfos.id,
                    project_id:this.userInfos.project_id,
                    type: this.dateType,
                    wechat_id:this.wechat
                }).then((res) => {
                   this.chartData['rows']=res.msg_statistics
                   this.chartData1['rows']=res.msg_hour                   
                });
            },
            getContactInfo(){
                 contactInfo({
                    id:this.userInfos.id,
                    project_id:this.userInfos.project_id,
                    wechat_id:this.wechat
                }).then((res) => {
                    this.chartData2['rows']=res
                });
            },
            getContactDis(){
                contactDis({
                    id:this.userInfos.id,
                    project_id:this.userInfos.project_id,
                    type: this.dateType,
                    wechat_id:this.wechat
                }).then((res) => {
                    this.chartData3['rows']=res
                });
            },
            getVoiceRecord(){
                voiceRecord({
                    id:this.userInfos.id,
                    project_id:this.userInfos.project_id,
                    type: this.dateType,
                    wechat_id:this.wechat
                }).then((res) => {
                    this.chartData4['rows']=res.data_pie
                    this.chartData5['rows']=res.data_is_call
                    this.chartData6['rows']=res.data_detail
                });
            },
            getWechatCircle(){
                wechatCircle({
                    id:this.userInfos.id,
                    project_id:this.userInfos.project_id,
                    wechat_id:this.wechat
                }).then((res) => {
                    this.chartData7['rows']=res.seven_type_ret
                    this.chartData8['rows']=res.data_type_ret
                    this.chartData9['rows']=res.data_day_ret
                });
            },
            getCallbackInfo(){
                callbackInfo({
                    id: this.useInfo.id,
                    type: this.dateType,
                    project_id: this.proId
                }).then((res) => {
                    this.chartData10['rows']=res.callback_way_data
                    this.chartData11['rows']=res.callback_detail
                    this.chartData12['rows']=res.callback_state_data
                });
            },
        }
    }
</script>
<style scoped>
.sky-tit {
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
}
.ivu-mt-48{
    margin-top: 72px !important;
}
.userInfo p{
    display: flex;
    line-height: 28px;
}
.userInfo p span:nth-child(1){
    flex-shrink: 0;
    width: 80px;
}
</style>